
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="/struts-tags" prefix="s"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>注册</title>
  <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css">
  <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/login.css">
  <!-- 可选的Bootstrap主题文件（一般不用引入） -->
  <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
  <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/js/bootstrap-datetimepicker/bootstrap-datetimepicker.css">
  <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
  <script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
  <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
  <script src="http://cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
  <script src="${pageContext.request.contextPath}/js/bootstrap-datetimepicker/bootstrap-datetimepicker.js"></script>
  <script src="${pageContext.request.contextPath}/js/bootstrap-datetimepicker/locales/bootstrap-datetimepicker.zh-CN.js"></script>
</head>
<body>
<div class="regbox">
  <form method="post" class="form-horizontal" action="${pageContext.request.contextPath}/user/userAction!update">
    <input type="hidden" name="id" value="${id}">
    <div class="form-group">
      <label class="col-sm-3 control-label">用户名/邮箱</label>
      <div class="col-sm-9">
        <input type="text" name="account" value="${account}" class="form-control" placeholder="Account/Email" disabled>
      </div>
    </div>
    <div class="form-group">
      <label class="col-sm-3 control-label">昵称</label>
      <div class="col-sm-9">
        <input type="text" name="name" value="${name}" class="form-control" placeholder="name">
      </div>
    </div>
    <div class="form-group">
      <label class="col-sm-3 control-label">真实姓名</label>
      <div class="col-sm-9">
        <input type="text" name="realname" value="${realname}" class="form-control" placeholder="realname">
      </div>
    </div>
    <div class="form-group">
      <label class="col-sm-3 control-label">出生日期</label>
      <div class="col-sm-9">
        <input type="text" name="birthdate" value="<fmt:formatDate value='${birthdate}' pattern='yyyy-MM-dd' />" class="form-control" id="datepicker" placeholder="click choose date">
      </div>
    </div>
    <div class="form-group">
      <label class="col-sm-3 control-label">性别</label>
      <div class="col-sm-9">
        <lable>
          <s:if test="sex == '男'">
            <label for="male">男</label>
            <input type="radio" name="sex" id="male" value="男" checked />
          </s:if>
          <s:else>
            <label for="male">男</label>
            <input type="radio" name="sex" id="male" value="男"/>
          </s:else>
          <s:if test="sex == '女'">
            <label for="female">女</label>
            <input type="radio" name="sex" id="female" value="女" checked />
          </s:if>
          <s:else>
            <label for="female">女</label>
            <input type="radio" name="sex" id="female" value="女" />
          </s:else>
        </lable>
      </div>
    </div>
    <div class="form-group">
      <label class="col-sm-3 control-label">手机</label>
      <div class="col-sm-9">
        <input type="text" name="phone" value="${phone}" class="form-control" placeholder="phone">
      </div>
    </div>
    <div class="form-group">
      <label class="col-sm-3 control-label">QQ</label>
      <div class="col-sm-9">
        <input type="text" name="qq" value="${qq}" class="form-control" placeholder="qq">
      </div>
    </div>
    <div class="form-group">
      <label class="col-sm-3 control-label">个人主页</label>
      <div class="col-sm-9">
        <input type="text" name="homepage" value="${homepage}" class="form-control" placeholder="homepage">
      </div>
    </div>
    <div class="form-group">
      <label class="col-sm-3 control-label">兴趣爱好</label>
      <div class="col-sm-9">
        <div class="checkbox">
          <label>
            <input type="checkbox" name="interests" value="音乐">
            音乐
          </label>
          <label>
            <input type="checkbox" name="interests" value="游戏">
            游戏
          </label>
          <label>
            <input type="checkbox" name="interests" value="电影">
            电影
          </label>
          <label>
            <input type="checkbox" name="interests" value="看书">
            看书
          </label>
          <label>
            <input type="checkbox" name="interests" value="运动">
            运动
          </label>
          <label>
            <input type="checkbox" name="interests" value="登山">
            登山
          </label>
          <label>
            <input type="checkbox" name="interests" value="游泳">
            游泳
          </label>
          <label>
            <input type="checkbox" name="interests" value="写字">
            写字
          </label>
        </div>
      </div>
    </div>
    <div class="form-group">
      <label class="col-sm-3 control-label">E-mail</label>
      <div class="col-sm-9">
        <input type="text" name="email" value="${email}" class="form-control" placeholder="email">
      </div>
    </div>
    <div class="form-group">
      <label class="col-sm-3 control-label"></label>
      <div class="col-sm-9">
        <button type="submit" class="btn btn-success">提交</button>
        <a class="btn btn-primary" href="${pageContext.request.contextPath}/jsp/index.jsp" role="button">返回</a>
      </div>
    </div>
    <s:if test="%{json != null}">
      <span style="color: red;">${json.msg}</span>
    </s:if>
  </form>
</div>
</body>
</html>
<script>
  /*
   *时间控件相关参数方法参阅  http://www.bootcss.com/p/bootstrap-datetimepicker
   */
  $("#datepicker").datetimepicker({
    format : 'yyyy-mm-dd',
    minView : 2,
    autoclose : true,
    startView : 4,
    language : "zh-CN"
  });

  var inters = ${userinters};
  $(function(){
    $("input[name=interests]").each(function(){
      var n = $.inArray($(this).val(), inters);
      if(n != -1){
        $(this).prop("checked",true);
      }
    });

  })
</script>
